<template>
  <div class="app">
    <div class="search-bar">
      <el-form :model="searchData" label-width="80px" style="padding: 0 20px;">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司名称" style="margin-bottom: 5px;">
              <el-select v-model="searchData.cmhkId"
                size="medium"
                filterable
                clearable
                class="select"
                remote
                reserve-keyword
                :remote-method="remoteMethod"
                @change="selectCompany"
                placeholder="请输入字段搜索">
                <el-option
                  v-for="item in companyNameOption"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div style="margin-top: 3px;">
              <el-button icon="el-icon-search" type="primary" size="small" @click="handleSearch">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="add-form">
      <el-button v-show="canEdit" type="primary" size="small" @click="handleAdd">新增</el-button>
    </div>
    <div ref="ref" :class="canEdit?'table-box':'table-box2'">
      <TableComponent :columns="shareTypeColumns" :data="tableData" :tableOption="tableOption" :stripe="stripe" :height="height">
          <template scope="scope">
             <el-button @click="seeRow(scope.scope.row)" type="text" size="mini">查看</el-button>
            <el-button v-show="canEdit" @click="editRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
          </template>
      </TableComponent>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisibleAdd" width="60%" :before-close="handleCancle">
      <el-form ref="form" :model="shareTypeForm" label-width="125px" label-position="left" style="padding: 0 30px;" :rules="rules" :disabled="ifEdit">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="股份类别名称" prop="shareCategoryName" style="margin-bottom: 12px;">
              <el-input v-model="shareTypeForm.shareCategoryName" size="medium" clearable />
            </el-form-item>
            <el-form-item label="交易类型" prop="transactionType" style="margin-bottom: 12px;">
              <el-select v-model="shareTypeForm.transactionType" placeholder="请选择" size="medium" clearable class="select">
                <el-option
                  v-for="item in transactionTypeOptions"
                  :key="item.index"
                  :label="item.value"
                  :disabled="item.isValid==='1'?false:true"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上市交易所及板块" prop="listedExchange" style="margin-bottom: 12px;">
              <el-select v-model="shareTypeForm.listedExchange" placeholder="请选择" size="medium" class="select" clearable>
                <el-option
                  v-for="item in listedExchangeOptions"
                  :key="item.index"
                  :label="item.value"
                  :disabled="item.isValid==='1'?false:true"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上市(挂牌)时间" prop="startDate" style="margin-bottom: 12px;">
              <el-date-picker type="date" v-model="shareTypeForm.startDate" size="medium" clearable format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="是否有面值" prop="isValue" style="margin-bottom: 12px;">
              <el-select v-model="shareTypeForm.isValue" placeholder="请选择" size="medium" class="select" clearable @change="ifValue">
                <el-option
                  v-for="item in options"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="股份类型" prop="shareType" style="margin-bottom: 12px;">
              <el-select v-model="shareTypeForm.shareType" placeholder="请选择" size="medium" class="select" clearable>
                <el-option
                  v-for="item in shareTypeOption"
                  :key="item.index"
                  :label="item.value"
                  :disabled="item.isValid==='1'?false:true"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="交易币种" prop="currency" style="margin-bottom: 12px;">
              <el-select v-model="shareTypeForm.currency" placeholder="请选择" size="medium" class="select" clearable>
                <el-option
                  v-for="item in currencyOptions"
                  :key="item.index"
                  :label="item.description"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="股票代码" prop="shareCode" style="margin-bottom: 12px;">
              <el-input v-model="shareTypeForm.shareCode" size="medium" clearable />
            </el-form-item>
            <el-form-item label="股票简称" prop="shareShortName" style="margin-bottom: 12px;">
              <el-input v-model="shareTypeForm.shareShortName" size="medium" clearable />
            </el-form-item>
            <el-form-item label="每股面值(原币)" prop="priceSharePerOc" style="margin-bottom: 12px;">
              <el-input v-model="shareTypeForm.priceSharePerOc" size="medium" clearable :disabled="canUsed" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancle">取 消</el-button>
        <el-button v-show="!ifEdit" type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableComponent from '@/components/Table/table'
import { queryShareTypeCompanyByName, companyShareList, queryShareType, editShareTypeFormal, moneyType, selectShareType, selectTransactType, selectListedExchange  } from '@/api/modules/propertyRight.js'
import { shareTypeColumns } from './index.js'
import { checkNumber } from '@/utils/pattern.js'
export default {
  components: { TableComponent },
  data() {
    return {
      searchData: {
        cmhkId: '',
        page: {
          pageNum: 1,
          pageSize: 10
        }
      },
      shareTypeColumns,
      tableData: [],
      height: null,
      title: '',
      tableOption: {
        isShowOperate: true,
        operateWidth: '100px'
      },
      stripe: true,
      dialogVisibleAdd: false,
      shareTypeForm: {
        cmhkId: '',
        shareCategoryName: '',
        transactionType: '',
        priceSharePerOc: null,
        shareType: '',
        currency: '',
        isValue: '0',
        listedExchange: '',
        startDate: '',
        shareCode: '',
        shareShortName: ''
      },
      options: [{ value: '1', label: '是'}, { value: '0', label: '否' }],
      currencyOptions: [],
      shareTypeOption: [],
      transactionTypeOptions: [],
      listedExchangeOptions: [],
      rules: {
        priceSharePerOc: [{ validator: checkNumber, trigger: 'change' }]
      },
      companyNameOption: [],
      ifEdit: false,
      canUsed: true, // 判断是否有面值
      canEdit: true // 判断是否有修改权限
    }
  },
  mounted() {
    const key = this.$store.state.key.resourceCode
    if (key === '0') {
      this.canEdit= false
    } else {
      this.canEdit = true
    }
    this.$nextTick(() => {
      this.height = this.$refs.ref.offsetHeight
    })
    window.onresize = () => {
      this.height = this.$refs.ref.offsetHeight
    },
    moneyType().then(res => {
      if (res.data.code === '0') {
        this.currencyOptions = res.data.body
      }
    })
    selectShareType().then(res => {
      if (res.data.code === '0') {
        this.shareTypeOption = res.data.body
      }
    })
    selectTransactType().then(res => {
      if (res.data.code === '0') {
        this.transactionTypeOptions = res.data.body
      }
    })
    selectListedExchange().then(res => {
      if (res.data.code === '0') {
        this.listedExchangeOptions = res.data.body
      }
    })
  },
  destroyed(){
    window.onresize = null
  },
  methods: {
    remoteMethod(query) {
      const data = {
        chiName: query
      }
      queryShareTypeCompanyByName(data).then(res => {
        if (res.data.code === '0') {
          this.companyNameOption = res.data.body
        }
      })
    },
    selectCompany(val) {
      this.searchData.cmhkId = val
      this.shareTypeForm.cmhkId = val
      this.handleSearch()
      if (val === '') {
        this.tableData = []
      }
    },
    handleSearch() {
      if (this.searchData.cmhkId === '') {
        this.$message.error('请先选择公司')
      } else {
        companyShareList(this.searchData).then(res => {
          if (res.data.code === '0') {
            this.tableData = res.data.body
          } else {
            return false
          }
        })
      }
    },
    // 点击新增
    handleAdd() {
      if (this.searchData.cmhkId === '') {
        this.$message.error('请先选择公司')
      } else {
        this.dialogVisibleAdd = true
        this.title = '新增'
        this.ifEdit = false
        this.shareTypeForm.cmhkId = this.searchData.cmhkId
        this.shareTypeForm.isValue = '0'
        this.canUsed = true
      }
    },
    // 点击确定新增/修改
    handleSubmit() {
      if (this.title === '新增') {
        editShareTypeFormal(this.shareTypeForm).then(res => {
          if (res.data.code === '0') {
            this.$message.success('新增成功')
            this.resetForm('form')
            this.dialogVisibleAdd = false
            this.handleSearch()
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else if (this.title === '修改') {
        editShareTypeFormal(this.shareTypeForm).then(res => {
          if (res.data.code === '0') {
            this.$message.success('修改成功')
            this.resetForm('form')
            this.dialogVisibleAdd = false
            this.handleSearch()
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    editRow(row) {
      this.dialogVisibleAdd = true
      this.title = '修改'
      this.ifEdit = false
      const params = {
        shareCategoryName: row.shareCategoryName,
        cmhkId: row.cmhkId
      }
      queryShareType(params).then(res => {
        if (res.data.code === '0') {
          this.shareTypeForm = res.data.body
          if (res.data.body.isValue === '0') {
            this.canUsed = true
          } else {
            this.canUsed = false
          }
        }
      })
    },
    seeRow(row) {
      this.dialogVisibleAdd = true
      this.title = '查看'
      this.ifEdit = true
      const params = {
        shareCategoryName: row.shareCategoryName,
        cmhkId: row.cmhkId
      }
      queryShareType(params).then(res => {
        if (res.data.code === '0') {
          this.shareTypeForm = res.data.body
        }
      })
    },
    ifValue(val) {
      console.log(val)
      if (val === '0') {
        this.canUsed = true
      } else {
        this.canUsed = false
      }
    },
    // 分页
    onTableChange(val) {
      this.searchData.page = val
      this.handleSearch()
    },
    handleCancle() {
      this.resetForm('form')
      this.dialogVisibleAdd = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
    
  }
}
</script>

<style lang="less" scoped>
  .app {
    height: 100%;
    .search-bar {
      width: calc(100% - 60px);
      background-color: #ffffff;
      margin-bottom: 10px;
      padding: 10px 30px;
    }
    .add-form {
      padding: 10px 20px;
      background-color: #ffffff;
    }
    .table-box {
      width: 100%;
      height: calc(100vh - 230px);
      .table {
        height: 100%;
      }
    }
    .table-box2 {
      width: 100%;
      height: calc(100vh - 200px);
      .table {
        height: 100%;
      }
    }
    .select {
      width: 100%;
    }
  }
</style>
<style>
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
  .el-input.is-disabled .el-input__inner {
    background-color:rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: rgb(228,231,237,0.15);
    border-color: #E4E7ED;
    color: #606266;
  }
</style>
